<script setup lang="ts">
import { inject } from 'vue'
import { User, setSrcAndPlayKey, setSrcAndPlay, addMusicToListKey, addMusicToList, popMessageKey, popMessage, switchLoginModelShowKey, Music } from '@/type';
import { useStore } from '@store/index';
import { collectMusicList } from '@api'
import { storeToRefs } from 'pinia';
const props = defineProps<{
    music: Music | null | undefined, userList: User[], musicList: Music[] | null,
    type: 'singleMusic' | 'musicList', typeId: string | null
}>()
const store = useStore()
const setSrcAndPlay = inject(setSrcAndPlayKey) as setSrcAndPlay
const addMusicToList = inject(addMusicToListKey) as addMusicToList
const popMessage = inject(popMessageKey) as popMessage
const setCollectMusicId = store.setCollectMusicId
const openCollectModel = store.openCollectModel
const isLogin = storeToRefs(store).isLogin
const showLoginModel = inject(switchLoginModelShowKey) as () => void
const playNow = () => {
    if (props.type == 'singleMusic') {
        if (props.music != null) {
            setSrcAndPlay({
                id: props.music.musicId, url: props.music.src,
                name: props.music.title, duration: props.music.duration,
                singerName: props.userList[0].name, image: props.music.image as string,
                typeId: props.typeId as string, from: 'singer'
            })
        }
    } else if (props.type == 'musicList') {
        playAll()
    }
}
const add = () => {
    if (props.type == 'singleMusic') {
        if (props.music != null) {
            addMusicToList({
                id: props.music.musicId, url: props.music.src,
                name: props.music.title, duration: props.music.duration,
                singerName: props.userList[0].name, image: props.music.image as string,
                typeId: props.typeId as string, from: 'singer'
            })
        }
    } else if (props.type == 'musicList') {
        addAll()
    }
}
const playAll = () => {
    if (props.musicList != null && props.musicList != undefined) {
        setSrcAndPlay({
            id: props.musicList[0].musicId, url: props.musicList[0].src,
            name: props.musicList[0].title, duration: props.musicList[0].duration,
            singerName: props.userList[0].name, image: props.musicList[0].image as string,
            typeId: props.typeId as string, from: 'musicList'
        })
        for (let i = 1; i < props.musicList.length; i++) {
            addMusicToList({
                id: props.musicList[i].musicId, url: props.musicList[i].src,
                name: props.musicList[i].title, duration: props.musicList[i].duration,
                singerName: props.userList[i].name, image: props.musicList[i].image as string,
                typeId: props.typeId as string, from: 'musicList'
            })
        }
    }
}
const addAll = () => {
    if (props.musicList != null && props.musicList != undefined) {
        for (let i = 0; i < props.musicList.length; i++) {
            addMusicToList({
                id: props.musicList[i].musicId, url: props.musicList[i].src,
                name: props.musicList[i].title, duration: props.musicList[i].duration, singerName: props.userList[i].name, image: props.musicList[i].image as string
            })
        }
    }
}
const collect = () => {
    if (isLogin.value == 1) {
        if (props.type == 'singleMusic') {
            if (props.music != null) setCollectMusicId(props.music.musicId);
            openCollectModel()
        } else if (props.type == 'musicList') {
            collectMusicList(props.typeId as string).then(res => {
                if (res.data.code == 1) {
                    popMessage('收藏成功', 'success')
                } else {
                    popMessage('已经收藏', 'success')
                }
            })
        }
    } else {
        showLoginModel()
        popMessage('未登录', 'error')
    }
}
const toComment = () => {
    document.getElementById('comment')?.scrollIntoView({ behavior: "smooth", block: 'center' });
}
</script>
<template>
    <div class="func">
        <a class="play" @click="playNow">
            <img style="height: 20px;" src="../../assets/play-white.svg" alt="">
            <span style="color: white;font-size: 14px;margin-left: 2px;">播放</span>
        </a>
        <a class="add" @click="add">
            <img style=" height: 22px; width: 22px;" src="../../assets/add-fff.svg" alt="">
        </a>
        <a class="collect" @click="collect">
            <img style="height: 20px;margin-left: 10px;" src="../../assets/collect-999.svg" alt="">
            <span style="color: #666;font-size: 14px;margin-left: 2px;">收藏</span>
        </a>
        <a class="comment" @click="toComment">
            <img style="height: 20px;margin-left: 10px;" src="../../assets/comment-999.svg" alt="">
            <span style="color: #666;font-size: 10px;margin-left: 2px;margin-right: 8px;">({{ store.getCommentNums
            }})</span>
        </a>
    </div>
</template>
<style scoped lang="css">
.func {
    display: flex;
}

.collect,
.play,
.add {
    cursor: pointer;
}

.add {
    height: 30px;
    width: 30px;
    display: inline-flex;
    align-items: center;
    background-color: var(--blue-style);
    padding: 0px 0px 2px 4px;
    border-radius: 0 5px 5px 0;
}

.play {
    background-color: var(--blue-style);
    display: inline-flex;
    align-items: center;
    padding: 1px 0px 1px 10px;
    border-radius: 5px 0 0 5px;
    height: 30px;
    width: 60px;
    border-right: 2px solid #4483bf;
}


.play:hover,
.add:hover {
    background-color: var(--blue-style-hover);
}

.comment:hover,
.collect:hover {
    background-color: #FCFCFC;
}

.collect {
    height: 32px;
    width: 69px;
    display: inline-flex;
    background-color: #f3f3f3;
    box-sizing: border-box;
    border-radius: 5px;
    border: 1px solid #666;
    align-items: center;
    margin: 0 5px;
    border-radius: 5px;
}

.comment {
    height: 32px;
    display: inline-flex;
    background-color: #f3f3f3;
    box-sizing: border-box;
    border-radius: 5px;
    border: 1px solid #666;
    align-items: center;
    margin: 0 5px;
    border-radius: 5px;
    cursor: pointer;
}
</style>